<template>
  <panel title="商品列表">
    <el-form label-width="100px" class="form">
      <el-form-item label="商品名称：">
        <el-input style="width:100%" v-model="goodsInfo.name"></el-input>
      </el-form-item>
      <el-form-item label="商品类型：">
        <el-select v-model="goodsInfo.category">
          <el-option v-for="item in goodsTypes" :key="item.id" :value="item.cateName"
            :label="item.cateName"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="search">查询</el-button>
      </el-form-item>
    </el-form>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column type="expand">
        <template slot-scope="props">
          <el-form label-position="left" inline class="demo-table-expand">
            <el-form-item label="商品 ID">
              <span>{{ props.row.id }}</span>
            </el-form-item>
            <el-form-item label="商品名">
              <span>{{ props.row.name }}</span>
            </el-form-item>
            <el-form-item label="所属分类">
              <span>{{ props.row.category }}</span>
            </el-form-item>
            <el-form-item label="商品价格">
              <span>{{ props.row.price }}</span>
            </el-form-item>
            <el-form-item label="商品图片">
              <span>
                <img :src="BASE_URL + props.row.imgUrl" alt="">
              </span>
            </el-form-item>
            <el-form-item label="创建时间">
              <span>{{ props.row.ctime | formatData }}</span>
            </el-form-item>
            <el-form-item label="商品评价">
              <span>{{ props.row.rating }}</span>
            </el-form-item>
            <el-form-item label="商品销量">
              <span>{{ props.row.sellCount }}</span>
            </el-form-item>
            <el-form-item label="商品描述">
              <span>{{ props.row.goodsDesc }}</span>
            </el-form-item>
          </el-form>
        </template>
      </el-table-column>
      <el-table-column label="商品名称" prop="name">
      </el-table-column>
      <el-table-column label="商品分类" prop="category">
      </el-table-column>
      <el-table-column label="商品价格" prop="price">
      </el-table-column>
      <el-table-column label="商品图片">
        <template slot-scope="scope">
          <img :src="BASE_URL + scope.row.imgUrl" alt="">
        </template>
      </el-table-column>
      <el-table-column label="商品描述" prop="goodsDesc">
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" type="primary" @click="editGoods(scope.row)">编辑</el-button>
          <el-popconfirm title="这是一段内容确定删除吗？" @confirm="removeGoods(scope.row)">
            <el-button size="mini" type="danger" slot="reference">删除</el-button>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <div class="page">
      <el-pagination :current-page="params.currentPage" :page-sizes="[5, 10, 15, 20]" :page-size="params.pageSize"
        layout="total, sizes, prev, pager, next, jumper" :total="total" @current-change="pageChange"
        @size-change="sizeChange">
      </el-pagination>
    </div>

    <!-- 弹框 -->
    <el-dialog title="提示" :visible.sync="dialogVisible" width="50%">
      <GoodsForm type="edit" :defaultForm="goodsEvery" @edit="edit"></GoodsForm>
    </el-dialog>
  </panel>
</template>

<script>
import dayjs from "dayjs";
import GoodsForm from './components/GoodsForm.vue'
import { editGoodsReq, goodsList, goodsTypeReq, removeGoodsReq } from '@/api/goods.api'
import { BASE_URL } from "@/utils/common";
export default {
  components: {
    GoodsForm
  },
  data() {
    return {
      BASE_URL,
      dialogVisible: false,
      goodsInfo: {
        name: '',
        category: ''
      },
      // 页数和每一页的数量
      params: {
        currentPage: 1,
        pageSize: 5
      },
      tableData: [], // 用于保存后端发送过来的数据
      total: null, // 分页数据的总数
      // 商品类型
      goodsTypes: [],
      goodsEvery: {}
    }
  },
  // 进入页面请求接口
  async created() {
    // 获取商品分类
    const res = await goodsTypeReq()
    this.goodsTypes = res.data.data
    this.ReqGoods()
  },
  methods: {
    // 通过商品名和商品类型查询商品
    search() {
      this.goodsInfo = { ...this.params, ...this.goodsInfo }
      goodsList(this.goodsInfo).then(res => {
        console.log(res);
        this.$message.success('查询成功！！')
        this.tableData = res.data.data
      })
    },
    // 修改商品
    async edit(goodsAdd) {
      console.log(goodsAdd);
      const res = await editGoodsReq(goodsAdd)
      this.$message.success(res.data.msg)
      this.dialogVisible = false
      this.ReqGoods()

    },
    // 弹框得到商品数据
    editGoods(row) {
      this.dialogVisible = true
      this.goodsEvery = row
    },
    // 封装请求商品列表接口的函数
    async ReqGoods() {
      // 获取商品列表
      const res = await goodsList(this.params)
      this.tableData = res.data.data
      this.total = res.data.total
    },
    // 分页设置
    pageChange(currentPage) {
      this.params.currentPage = currentPage
      this.ReqGoods()
    },

    // 一页的数据的数量
    sizeChange(pageSize) {
      this.params.pageSize = pageSize
      this.ReqGoods()
    },

    // 删除商品
    removeGoods(reGoods) {
      console.log(reGoods);
      removeGoodsReq(reGoods).then(res => {
        console.log(res);
        this.$message.success(res.data.msg)
        this.ReqGoods()
      })
    }
  },
  filters: {
    // 处理日期的函数
    formatData(ctiem) {
      return dayjs(ctiem).format("YYYY/MM/DD HH:mm:ss");
    }
  }
};
</script>

<style lang="less" scoped>
.demo-table-expand {
  font-size: 0;
}

.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}

.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}

img {
  width: 50px;
  height: 50px;
}

.page {
  margin-top: 20px;
}

.el-button--primary {
  margin-right: 10px;
}

.form {
  display: flex;
}
</style>